<template>
  <div class="rule">
       <img class="title" src="./../../static/images/rule_title.png" alt="">
       <div class="content">
           <div class="con_box">
            <p style="text-indent: 30px;">走进杭州的博物馆，在杭州的文物古迹中寻找其中的“龙元素”，上传图片（图片格式为50M以内，jpg格式），领取你的专属龙年祝福！</p>
            <p>活动截止日期：2024年2月18日</p>
            <p style="margin: 0;padding: 0;">温馨提醒：</p>
            <p  style="text-indent: 30px;"> 大家可将生成海报下载，上传至小红书、微博、抖音三个平台，发布时带上两个话题：#走遍杭州的博物馆##寻龙令#有机会领取精美文创礼品，具体规则请参见“杭城迹忆”微信公众号相关推文。</p>
           </div>
       </div>
       <div class="rule_footer">
                <img @click="back" class="rule_btn" src="./../../static/images/btn_back.png" alt="">
                <van-uploader :after-read="afterRead" />
       </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Uploader } from 'vant';

Vue.use(Uploader);
export default {
  name: 'rule',
  data () {
    return {
       str:''
    }
  },
  methods:{
    back(){
      window.location.href = 'https://rmt.imugeda.com/c/zxwz/vbm_/index.html'
    },
    afterRead(file) {
      // 生成一个随机数1，2，3代表用哪种相框
      let num =1 + Math.floor(Math.random() * 3)
      if(file.content){
        this.$router.push({
              path:'/poster',
              query:{
                src:file.content,
                num:num
              }
          })
      }
    },
  }
}
</script>
<style scoped>
.rule{
  width: 100%;
  height: 100%;
  background: url('./../../static/images/rule_bg.jpg') no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.title{
  width: 214px;
  height: 69px;
  margin-top: 50px;
}
.content{
  width: 100%;
  height: 440px;
  background: url('./../../static/images/rule_content.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  justify-content: center;
}
.rule_footer{
  width: 100%;
  height: 45px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin-top: 25px;
}
.rule_btn{
  width: 163px;
  height: 45px;
}
.content p{
  color:#fff6e3;
  font-size: 15px;
  width: 100%;
  text-align: left;
}
.con_box{
  width: calc(100% - 150px);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;

  
}
.rule_footer>>>.van-uploader__upload-icon{
  opacity: 0 !important;
}
.rule_footer>>>.van-uploader__upload{
  width: 163px !important;
  height: 45px !important;
  background: url('./../../static/images/btn_update.png') no-repeat !important;
  background-size: 100% 100% !important;
}
.rule_footer>>>.van-uploader {
  width: 163px !important;
  height: 45px !important;
  box-sizing: border-box;
}
</style>
